<template>
  <div class="stationInfo-page">
    <a-tabs tab-position="left" v-model:activeKey="state.activeEqcd" v-if="state.equipListData.length > 0">
      <a-tab-pane v-for="eqcdItem in state.equipListData" :key="eqcdItem.eqcd" :tab="eqcdItem.eqnm">
        <table class="tableInfo">
          <tbody>
            <tr>
              <td class="fieldName">设备名称</td>
              <td>{{ eqcdItem !== null ? eqcdItem.eqnm : '' }}</td>
              <td class="fieldName">设备编码</td>
              <td>{{ eqcdItem !== null ? eqcdItem.eqcd : '' }}</td>
            </tr>
            <tr>
              <td class="fieldName">流量卡编号</td>
              <td>{{ eqcdItem !== null ? eqcdItem.sms : '' }}</td>
              <td class="fieldName">总流量</td>
              <td>{{ eqcdItem !== null ? eqcdItem.traffic : '' }}</td>
            </tr>
            <tr>
              <td class="fieldName">设备品牌</td>
              <td>{{ eqcdItem !== null ? eqcdItem.brand : '' }}</td>
              <td class="fieldName">生产厂家</td>
              <td>{{ eqcdItem !== null ? eqcdItem.factory : '' }}</td>
            </tr>
            <tr>
              <td class="fieldName">已用流量</td>
              <td>{{ eqcdItem !== null ? eqcdItem.usedTraffic : '' }}</td>
              <td class="fieldName">运营商</td>
              <td>{{ eqcdItem !== null ? eqcdItem.operator : '' }}</td>
            </tr>
            <tr>
              <td class="fieldName">联系人</td>
              <td>{{ eqcdItem !== null ? eqcdItem.user : '' }}</td>
              <td class="fieldName">联系方式</td>
              <td>{{ eqcdItem !== null ? eqcdItem.phone : '' }}</td>
            </tr>
            <tr>
              <td class="fieldName">运营商联系人</td>
              <td>{{ eqcdItem !== null ? eqcdItem.smsUser : '' }}</td>
              <td class="fieldName">运营商联系方式</td>
              <td>{{ eqcdItem !== null ? eqcdItem.smsPhone : '' }}</td>
            </tr>
            <tr>
              <td class="fieldName">维保期限</td>
              <td colspan="3">{{ eqcdItem !== null ? eqcdItem.warranty : '' }}</td>
            </tr>
          </tbody>
        </table>
        <a-table
          class="antdTableInfo"
          :columns="state.tableColumns"
          :data-source="state.tableDataSource"
          :scroll="{ y: 300 }"
          :pagination="false"
          size="small"
          bordered
        />
      </a-tab-pane>
    </a-tabs>
    <div style="margin-top: 80px" v-if="state.equipListData.length === 0">
      <a-empty />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, watch, onMounted } from 'vue';
  import { getEquipList, getEquipInfo } from "@/api/realTime/realData";

  defineOptions({ name: 'DeviceInfo' });

  const state = reactive({
    activeEqcd: '',
    equipListData: [],
    tableDataSource: [],
    tableColumns: [
      { dataIndex: 'rtm',  title: '维养时间',  align: "center", },
      { dataIndex: 'rnm',  title: '维养人',  align: "center", },
      { dataIndex: 'rphone',   title: '联系方式', align: "center", },
      { dataIndex: 'content',   title: '维养原因', align: "center", },
    ]
  });

  const props = defineProps({
    data: { type: Object },
  });

  const getStationDataInfo = async ()=>{
    const equipListData = await getEquipList({ stcd: props.data.stcd });
    state.equipListData = equipListData;
    state.activeEqcd = equipListData.length ? equipListData[0].eqcd: '';
  }

  watch(
    () => state.activeEqcd,
    async (val) => {
      const equipInfoData =  await getEquipInfo({ eqcd: val });
      state.tableDataSource = equipInfoData;
    }
  );

  onMounted(() => {
    getStationDataInfo();
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .stationInfo-page {
    width: 100%;
    height: 100%;
    min-height: 500px;
    .tableInfo {
      width: 80%;
      margin-bottom: 20px;
      tr td {
        border: 1px solid #eee;
        padding: 8px 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      tr td:nth-child(1),
      tr td:nth-child(3) {
        width: 15%;
        min-width: 120px;
        background: #fafafa;
        color: #333;
      }
      tr td:nth-child(2),
      tr td:nth-child(4) {
        width: 35%;
        min-width: 200px;
        color: #111;
      }
    }
    .antdTableInfo {
      width: 80%;
    }
  }
</style>
